<template>
  <div class="home-data">
    <ContentTitle :info="info" />
    <DataTop :offlineTotal="offlineTotal" :lowBattery="lowBattery" :offline="offline" :sensorTotal="sensorTotal" :LoRaWANTotal="LoRaWANTotal" :LoRaPPTotal="LoRaPPTotal" :group="group"/>
    <DataUnder/>
  </div>
</template>
<script setup>
import ContentTitle from "../../components/ContentTitle.vue";
import DataTop from "./data/DataTop.vue";
import DataUnder from "./data/DataUnder.vue";
import {ref,onMounted} from 'vue';
import * as api from "@/api/index";
const info = ref({
  text: "设备列表",
  type: "", 
  msg: "监控所有设备状态",
});
const LoRaWANTotal = ref();
const LoRaPPTotal = ref();
const group = ref();
const sensorTotal = ref();
const offlineTotal = ref();
const offline = ref();
const lowBattery = ref();
const deviceCount = () => {
  api.$deviceCount().then((res) => {
    LoRaWANTotal.value = res.data.LoRaWAN.total;
    LoRaPPTotal.value = res.data.LoRaPP.total;
    sensorTotal.value = res.data.sensor.total;
    offlineTotal.value = res.data.LoRaPP.offline +  res.data.LoRaWAN.offline
    group.value = res.data.group; 
    offline.value = res.data.sensor.offline; 
    lowBattery.value = res.data.sensor.lowBattery; 
  });
};
onMounted(deviceCount);
</script>
<style lang="less">
@import "./data.less";
  
</style>